<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>template distribute</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>

  <x-test></x-test>
  
  <polymer-element name="x-echo">
    <template>
      <div>Echoing:</div>
      <content select="*"></content>
    </template>
    <script>
      Polymer('x-echo');
    </script>  
  </polymer-element>

  <polymer-element name="x-test">
    <template>
      <x-echo id="echo">
        <template repeat="{{list}}">
          <div>{{name}}</div>
        </template>
      </x-echo>
    </template>
    <script>
      Polymer('x-test', {
        attached: function() {
          this.onMutation(this.shadowRoot, function() {
            // tickle SD polyfill
            this.offsetHeight;
            var children = this.$.echo.children;
            chai.assert.equal(children[0].localName, 'template',
              'shadowDOM dynamic distribution via template');
            chai.assert.equal(children[1].textContent, 'foo',
              'shadowDOM dynamic distribution via template');
            chai.assert.equal(children[2].textContent, 'bar',
              'shadowDOM dynamic distribution via template');
            chai.assert.equal(this.$.echo.children.length, 3,
              'expected number of actual children');
            done();
          });
          this.list = [
            {name: 'foo'},
            {name: 'bar'}
          ];
          Platform.flush();
        }
      });
    </script>
  </polymer-element>

  </body>
</html>
